import {hasPermission} from "@/utils/permiss";

/**
 * 权限指令 模板使用
 */
export const permiss = {
    mounted(el, binding) {
        if (!hasPermission(binding.value)) {
            el.remove()
        }
    },
}
/**
 * 弹窗拖拽指令
 */
export const dragDialog = {
    mounted(el) {
        console.log(el)
        const header = el.querySelector('.el-dialog__header')
        const body = el.querySelector('.el-dialog')
        const sty = body.currentStyle || window.getComputedStyle(body, null)
        header.onmousedown = (e) => {
            const disX = e.clientX - header.offsetLeft
            const disY = e.clientY - header.offsetTop
            let styL, styT
            if (sty.left.includes('%')) {
                styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
                styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
            } else {
                styL = +sty.left.replace(/\px/g, '')
                styT = +sty.top.replace(/\px/g, '')
            }
            header.style.cursor = 'move'
            const screenWidth = window.innerWidth // 可见区域宽度
            const screenHeight = window.innerHeight // 可见区域高度

            const bodyWidth = body.offsetWidth; // 对话框宽度
            const bodyHeight = body.offsetHeight; // 对话框高度

            const minLeft = body.offsetLeft;
            const maxLeft = screenWidth - body.offsetLeft - bodyWidth;

            const minTop = body.offsetTop;
            const maxTop = screenHeight - body.offsetTop - bodyHeight;
            document.onmousemove = function (e) {
                let X = e.clientX - disX
                let Y = e.clientY - disY
                if (-(X) > minLeft) {
                    X = -(minLeft);
                } else if (X > maxLeft) {
                    X = maxLeft;
                }
                if (-(Y) > minTop) {
                    Y = -(minTop);
                } else if (Y > maxTop) {
                    Y = maxTop;
                }
                body.style.left = X + styL + 'px'
                if (screenHeight > bodyHeight) body.style.top = Y + styT + 'px'
            }
            document.onmouseup = function () {
                header.style.cursor = ''
                document.onmousemove = null
                document.onmouseup = null
            }
        }
    }
}
